<template>
	<view class="">
		<view>
			<u-tabs :scrollable="false" lineWidth="60rpx" lineHeight="4rpx"  fontSize="28rpx" activeColor="#1C76FE" inactiveColor="#333333"  itemStyle="width: 25%;padding: 24rpx 0;" ref="uTabs" :list="list" :current="current" @change="tabsChange" 
				swiperWidth="750rpx"></u-tabs>
		</view>
		<view class="tab_content mt_12 bc_fff">
			<DataView v-if="current==0"/>
			<AiContent v-if="current==1"/>
			<BehaviorAnalysis v-if="current==2"/>
			<UserOrder v-if="current==3"/>
		</view>
	</view>

</template>

<script>
	import AiContent from "./components/aiContent.vue"
	import DataView from "./components/dataView.vue"
	import BehaviorAnalysis from "./components/behaviorAnalysis.vue"
	import UserOrder from "./components/userOrder.vue"
	export default {
		components:{
			AiContent,
			DataView,
			BehaviorAnalysis,
			UserOrder
		},
		data() {
			return {
				list: [{
					name: '数据总览'
				}, {
					name: 'AI追踪'
				}, {
					name: '行为分析'
				},{
					name: '用户订单'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 3, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_content{
		background-color: #f6f6f6;
		border: 1px solid red;
	}

</style>